<script setup lang="ts">
defineProps({
  dataList: {
    type: Array<any>,
    default: () => []
  },
  title: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div class="hotSectionItem relative rounded-xl text-center h-fit">
    <div class="hotSectionItemHeader rounded-xl pt-7 pb-7 text-base font-medium leading-6 relative">
      {{ title }}
    </div>
    <div class="hotSectionItemList text-left flex flex-col gap-6 mt-4 mb-4">
      <template v-for="(item, index) in dataList">
        <a :href="item.url" target="_blank">
          <div class="dataItem relative">
            <div class="flex items-center relative h-[25px] w-[480px] pt-[16px] pl-[15px] pr-[15px] pb-[17px]">
              <span
                  class="absolute top-1/2 block text-white h-[25px] w-[25px] text-center leading-6 text-[12px] left-3.5 mt-[-13px]"
                  :class="index === 0? 'ques-list-name-icon-1': index === 1? 'ques-list-name-icon-2': index === 2? 'ques-list-name-icon-3': 'ques-list-name-icon'">
                {{ index + 1 }}
              </span>
              <span class="line-clamp-1 ml-8">{{ item.keyword }}</span>
            </div>
            <div class="absolute right-0 top-0 flex items-center h-full pr-2" v-if="index === 0">
              <img src="@/assets/background/Hotest.svg" class="h-6" alt="Hot">
            </div>
            <div class="absolute right-0 top-0 flex items-center h-full pr-2 text-[12px] text-rose-500" v-else>
              {{ item.hotValue + "°"}}
            </div>
          </div>
        </a>
      </template>
    </div>
  </div>
</template>

<style scoped lang="less">
.hotSectionItem {
  border: 1px solid #f2f2f2;;
}
.hotSectionItemHeader{
  border-bottom: 1px solid #f2f2f2;
  background: url(@/assets/background/bg_pc.png) no-repeat center;
  background-size: cover;
}
.ques-list-name-icon-1 {
  background-position: 125px 0;
  background-image: url('@/assets/background/icon-body.png');
}
.ques-list-name-icon-2 {
  background-position: 125px -27px;
  background-image: url('@/assets/background/icon-body.png');
}

.ques-list-name-icon-3 {
  background-position: 159px -32px;
  background-image: url('@/assets/background/icon-body.png');
}

.ques-list-name-icon {
  background-position: 0 -60px;
  background-image: url('@/assets/background/icon-body.png');
}
</style>
